<template>
  <div class="content">
    <div class="swiper-container" v-if="page.length > 0">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in page" :key="item.id">
          <ul class="item-swiper">
            <li v-for="page in item" :key="page.id">
              <img :src="base_url + page.image_url" />
              <span>{{ page.title }}</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </div>
    <img src="../../assets/images/msite_back.svg" alt="" v-else />
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
  props: ['foodsLis'],
  data() {
    return {
      base_url: 'https://fuss10.elemecdn.com'
    }
  },
  computed: {
    page() {
      const itUrl = []
      this.foodsLis.forEach((item, index) => {
        const ind = Math.floor(index / 8)
        if (!itUrl[ind]) itUrl[ind] = []
        itUrl[ind].push(item)
      })
      return itUrl
    }
  },
  watch: {
    foodsLis(value) {
      // 一旦界面完成更新，立即调用（但此条语句一定要写在数据更新之后）
      this.$nextTick(() => {
        /* eslint-disable no-new */
        new Swiper('.swiper-container', {
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        })
      })
    }
  }
}
</script>

<style lang="less">
.swiper-pagination-bullet-active {
  background-color: #52b54b;
}
.content {
  background-color: #fff;
}
.swiper-container {
  width: 100%;
  height: 5.5rem;
  background-color: #fff;
}
.item-swiper {
  padding-top: 0.7rem;
  padding-bottom: 0.2rem;
  li {
    width: 25%;
    display: flex;
    flex-direction: column;
    text-align: center;
    float: left;
    padding-bottom: 0.7rem;

    img {
      display: block;
      height: 1rem;
      width: 1rem;
      margin: 0 auto;
    }
    span {
      color: #666;
      font-size: 0.35rem;
      padding: 0.1rem 0;
    }
  }
}
</style>
